import React, {Component} from 'react';
import ReactAplayer from 'react-aplayer';
import axios from "axios";
class Music extends Component {
  constructor(props) {
    super(props);
    this.state = {
      musicList: []
    }
  }

  onPlay = () => {
    console.log('on play');
  };

  onPause = () => {
    console.log('on pause');
  };

  // example of access aplayer instance
  onInit = ap => {
    this.ap = ap;
  };

  render() {
    const props = {
      theme: '#F57F17',
      lrcType: 3,
      audio: [

      ]
    };
    props.audio = this.state.musicList;
console.log(props.audio);
    return (
        <div>
          <ReactAplayer
              {...props}
              onInit={this.onInit}
              onPlay={this.onPlay}
              onPause={this.onPause}
              key={Math.random()}
          />
          {/* example of access aplayer instance API */}
          <button onClick={() => this.ap.toggle()}>暂停</button>
        </div>
    )
  }

  //网易云接口
  componentDidMount() {
    axios.get('https://api.bzqll.com/music/netease/songList?key=579621905&id=3778678&limit=10&offset=0', {})
        .then((res) => {
          this.setState({
            musicList: res.data.data.songs
          },() => {
            console.log(this.state);
          })
        })
        .catch((err) => {
          console.log(err);
        })
  }
}

export default Music;